<template>
  <div id="app">
    <h3 class="xh-title" ref="xh-title">短链接生成演示</h3>
    <input-box />
    <result-box />
  </div>
</template>

<script>
import InputBox from "./components/InputBox";
import ResultBox from "./components/ResultBox";

export default {
  name: "App",
  components: {
    InputBox,
    ResultBox,
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const _title = this.$refs["xh-title"];
      // 定义颜色
      const fontColors = [
        { fontColor: "#3900FF", shadowColor: "#004CFD" },
        { fontColor: "#1900FF", shadowColor: "#0166FE" },
        { fontColor: "#0100FF", shadowColor: "#0177FF" },
        { fontColor: "#005CFF", shadowColor: "#009FFF" },
        { fontColor: "#007CFF", shadowColor: "#00C2FF" },
        { fontColor: "#0091FF", shadowColor: "#00F0FF" },
        { fontColor: "#00A9FF", shadowColor: "#00FFEA" },
      ];
      this.setColor(fontColors, _title);
      setInterval(() => {
        fontColors.unshift(fontColors.pop());
        this.setColor(fontColors, _title);
      }, 100);
    },
    setColor(fontColors, title) {
      let _text = "";
      Array.from(title.innerText).forEach((t, i) => {
        _text += `<span style="color:${fontColors[i].fontColor};text-shadow:0 0 0 ${fontColors[i].shadowColor},0 0 3px ${fontColors[i].shadowColor};">${t}</span>`;
      });
      title.innerHTML = _text;
    },
  },
};
</script>

<style lang="stylus">
* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100vw;
  height: 100vh;
}

#app {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  min-width: 1000px;
  position: relative;
  background-color: #fefefe;
}

.xh-title {
  font-size: 50px;
  //text-shadow: 0 0 0 lightyellow, 0 0 3px yellow, 0 0 6px brown;
  color: #ffffff;
  letter-spacing: 5px;
  width: 100%;
  line-height: 80px;
  text-align: center;
}
</style>
